<template>
  <div class="PicView">
    <div class="toolbar">
      <div class="t-content">
        <div class="solid-view">
          <span class="solid"></span>
          <i class="el-icon-s-home" @click="onBackToHome" style=" color: rgba(0, 0, 0);"></i>
          <span class="solid"></span>
          <i class="iconfont" style="color: rgba(0, 0, 0);" @click="onResetViewClick">&#xe6b4;</i>
        </div>
        <span class="file-name">{{fileName}}</span>
        <i class="iconfont down" @click="downLoadFile" style="color: rgba(0, 0, 0);">&#xe6c2;</i>
      </div>
    </div>
    <div class="View">
      <viewer id="viewer" :options="options" :images="pic" class="images" @inited="inited">
        <template>
          <img :src="pic" v-show="false" />
        </template>
      </viewer>
    </div>
  </div>
</template>

<script>
import { getFile } from "@/api/api";
// 导出模块
export default {
  // 模块名字
  name: "PicView",
  // 模块数据
  data() {
    //数据
    return {
      fileName: "",
      pic: [],
      options: {
        inline: true,
        button: false,
        navbar: false,
        title: false,
        toolbar: false,
        tooltip: false,
        fullscreen: false,
      },
    };
  },
  // 注册组件
  components: {},
  // 监听指定值，只有指定值变化，才会触发
  watch: {},
  // 里面的函数只有调用才会执行（实时计算）里面是定义的方法
  methods: {
    onBackToHome() {
      this.$router.push("/HomePageView");
    },
    downLoadFile() {
      if (this.pic[0]) this.fdownload(this.pic[0], this.fileName);
    },
    fdownload(url, filename) {
      let _this = this;
      this.getBlob(url, function (blob) {
        _this.saveAs(blob, filename);
      });
    },
    getBlob(url, cb) {
      var xhr = new XMLHttpRequest();
      xhr.open("GET", url, true);
      xhr.responseType = "blob";
      xhr.onload = function () {
        if (xhr.status === 200) {
          cb(xhr.response);
        }
      };
      xhr.send();
    },
    saveAs(blob, filename) {
      if (window.navigator.msSaveOrOpenBlob) {
        navigator.msSaveBlob(blob, filename);
      } else {
        var link = document.createElement("a");
        var body = document.querySelector("body");
        link.href = window.URL.createObjectURL(blob);
        link.download = filename;
        // fix Firefox
        link.style.display = "none";
        body.appendChild(link);
        link.click();
        body.removeChild(link);
        window.URL.revokeObjectURL(link.href);
      }
    },
    onResetViewClick() {
      this.$viewer.reset()
    },
    inited(viewer) {
      this.$viewer = viewer;
    },
  },
  // 创建前状态(里面是操作)
  beforeCreate() {},
  // 创建完毕状态(里面是操作)
  created() {
    let data = {
      fileID: this.$route.query.id,
      userID: "",
      pageIndex: 1,
      pageSize: 10,
    };
    getFile(data).then((res) => {
      console.log(res);
      if (res.data.code != 0) {
        return;
      }

      this.pic = [];
      this.fileName = res.data.data[0].name + "." + res.data.data[0].ext;
      this.pic.push(res.data.data[0].path);
    });
  },
  // 挂载前状态(里面是操作)
  beforeMount() {},
  // 挂载结束状态(里面是操作)
  mounted() {},
  // 更新前状态(里面是操作)
  beforeUpdate() {},
  // 更新完成状态(里面是操作)
  updated() {},
  // 销毁前状态(里面是操作)
  beforeDestroy() {},
  // 销毁完成状态(里面是操作)
  destroyed() {},
};
</script>
<style  lang="scss" scoped>
.PicView {
  position: fixed;
  width: 100%;
  height: 100%;
  .toolbar {
    width: 100%;
    background: rgba(245, 245, 245, 1);
    .t-content {
      width: 100%;
      height: 32px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      position: relative;
      text-align: center;
      .iconfont,
      .el-icon-s-home {
        font-size: 24px;
        cursor: pointer;
        color: rgba(0, 0, 0);
        margin: 0 8px;
      }
      .l-menu {
        display: flex;
        align-items: center;
        margin-left: 32px;
        height: 24px;
        span {
          margin: 0 18px;
          font-size: 14px;
          color: rgba(0, 0, 0, 0.85);
          cursor: pointer;
        }
      }
      .file-name {
        position: absolute;
        left: 50%;
        top: 50%;
        cursor: pointer;
        transform: translate(-50%, -50%);
      }
      .tianchong {
        width: 5px;
        height: 5px;
      }
    }
  }
  .View {
    width: 100%;
    height: calc(100% - 32px);
  }
  #viewer  {
    width: 100%;
    height: 100%;
  }
}
</style>
